<template>
	<div class="main">
		<van-swipe :autoplay="3000" indicator-color="blue">
			<van-swipe-item v-for="image in images" :key="image">
				<img :src="image" />
			</van-swipe-item>
		</van-swipe>
		<div class="menu">
			<div class="itemnContainer">
				<div class="item" v-for="item in cgList" :key="item.id" @click="jumpTo(item.id)">
					<div class="header" :style="`background-color:${item.color}`">
						{{ item.tag }}
					</div>
					<div class="name">{{ item.cgname }}</div>
				</div>
			</div>
			<div class="good" v-if="goodList.length">
				<div class="header">
					<span class="title">精品好物</span>
					<span class="more" @click="jumpTo">查看更多 ></span>
				</div>
				<div class="cardContainer">
					<goodCard v-for="(item, index) in goodList" :key="item.id" :info="item"></goodCard>
				</div>
			</div>
			<div class="hot" v-if="hotList.length">
				<div class="header">
					<span class="title">热门商品</span>
					<span class="more" @click="jumpTo">查看更多 ></span>
				</div>
				<div class="cardContainer">
					<shopCard v-for="(item, index) in hotList" :key="item.id" :info="item"></shopCard>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import goodCard from '@/components/goodCard/index.vue';
import shopCard from '@/components/shopCard/index.vue';
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import { List, CategoryList } from '@s/products';
const { proxy } = getCurrentInstance();
const data = reactive({
	hotList: [],
	cgList: [
		{
			id: 1,
			cgname: '手机数码',
			tag: '数码',
			color: '#fcd127',
		},
		{
			id: 2,
			cgname: '家用电器',
			tag: '家电',
			color: '#fea73b',
		},
		{
			id: 3,
			cgname: '日常用品',
			tag: '日用',
			color: '#3fd0ad',
		},
		{
			id: 4,
			cgname: '宠物用品',
			tag: '宠物',
			color: '#3fd0ad',
		},
		{
			id: 5,
			cgname: '服装服饰',
			tag: '服饰',
			color: '#ff6850',
		},
		{
			id: 6,
			cgname: '文具',
			tag: '文具',
			color: '#50e8d0',
		},
		{
			id: 7,
			cgname: '书籍',
			tag: '书籍',
			color: '#fea73b',
		},
		{
			id: 8,
			cgname: '家具',
			tag: '家具',
			color: '#3fd0ad',
		},
	],
	goodList: [],
});
const images = [
	'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate40.png',
	'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-p50-pocket.png',
	'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-iphone13.png',
];
const { hotList, cgList, goodList } = toRefs(data);

List({ ishot: 1, pageSize: 100, pageNum: 1, selled: 0 }).then((res) => {
	data.hotList = res.data.data;
});

List({ isgood: 1, pageSize: 100, pageNum: 1, selled: 0 }).then((res) => {
	data.goodList = res.data.data;
});

const jumpTo = (id) => {
	proxy.$router.push({
		name: 'category',
		params: {
			id: id,
		},
	});
};
const emit = defineEmits(['loading']);
onMounted(() => {
	// 初始化活动状态
	emit('loading');
});
</script>

<style lang="scss" scoped>
.main {
	min-height: 100%;
	padding-bottom: 5vh;
	.banner {
		width: 100%;
		height: 574px * 0.5;
		background: url(~@/assets/img/index/banner.png) no-repeat;
		background-size: contain;
	}
	.menu {
		position: relative;
		width: 100%;
		background-color: #ffffff;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		padding: 25px 15px 0px;
		.header {
			display: flex;
			justify-content: space-between;
			.title {
				font-size: 16px;
				font-weight: bolder;
				line-height: 1;
				color: #333333;
			}
			.title::before {
				content: '';
				position: relative;
				top: 2px;
				width: 2px;
				height: 16px;
				margin-right: 5px;
				display: inline-block;
				background: #fb5746;
			}
			.more {
				font-size: 12px;
				color: #777777;
			}
		}
		.good {
			margin-top: 54px * 0.5;
			width: 100%;
			.cardContainer {
				margin-top: 15px;
				overflow-x: auto;
				display: flex;
				div {
					margin-right: 10px;
				}
			}
			.cardContainer::-webkit-scrollbar {
				display: none;
			}
		}
		.hot {
			padding-bottom: 20px;
			margin-top: 54px * 0.5;
			width: 100%;
			.cardContainer {
				margin-top: 15px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				div {
					margin-bottom: 10px;
				}
			}
		}
		.itemnContainer {
			width: 100%;
			height: 316px * 0.5;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				margin-right: 60px * 0.5;
				.header {
					width: 96px * 0.5;
					height: 96px * 0.5;
					background-color: #e8e8e8;
					border-radius: 96px * 0.25;
					color: #ffffff;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.name {
					text-align: center;
					line-height: 1;
					margin-top: 10px;
					font-size: 13px;
					font-weight: bold;
				}
			}
			.item:nth-child(4) {
				margin-right: 0px;
			}

			.item:nth-child(5),
			.item:nth-child(6),
			.item:nth-child(7) {
				margin-top: 36px * 0.5;
			}
			.item:nth-child(8) {
				margin-top: 36px * 0.5;
				margin-right: 0px;
			}
		}
	}
}
</style>
